import style from "./login.module.css"
import { Button, Checkbox, Form, Input, Col, Row, message } from 'antd';
import { UserOutlined, BarcodeOutlined, LockOutlined } from '@ant-design/icons';
import { useEffect, useState } from "react";
import { getCaptchaApi, adminLoginApi } from "@/services/admin"
import ReactCanvasNest from 'react-canvas-nest';
export default function Login() {
    const [captcha, setCaptcha] = useState('');
    useEffect(() => {
        getCaptcha()
    }, [])
    function getCaptcha() {
        getCaptchaApi().then(res => {
            // console.log(res,"验证码")
            setCaptcha(res)
        })
    }
    const config = {
        follow:false,
    }
    function handleClick() {
        getCaptcha()
    }
    function onFinish(data) {
        console.log(data)
        const originData = data
        const submitObj = {
            loginId: data.loginId,
            loginPwd: data.loginPwd,
            captcha: data.captcha
        }
        adminLoginApi(submitObj).then(res => {
            if (!res.data) {
                message.error('验证码错误');
                getCaptcha()
                return
            } else {
                if (!res.data.data) {
                    message.error('账号密码不正确')
                    getCaptcha()
                    return
                } else {
                    // 判断账号是否冻结
                    if (!res.data.data.enabled) {
                        // 冻结
                        message.warning('账号冻结,请联系管理员');
                        return
                    }

                    // 存储token
                    const token = res.data.token;

                    if (originData.remember) {
                        // 用localStorage 存储token
                        localStorage.setItem('token', token);
                    } else {
                        // 用session存储token 
                        sessionStorage.setItem('token', token)
                    }
                    console.log(res)

                    // 跳转首页
                    location.href = "/"

                }
            }
        })
    }
    function onFinishFailed(err) {
        console.log(err)
    }
    return (

        <div className={style.pageContainer}>
            <div className={style.wrapContainer}>
            <ReactCanvasNest className='canvasNest' config={{ pointColor: ' 255, 255, 255 ',follow:false }} style={{ zIndex:1,height:'100%',width:"100%",position:'absolute',left:'0px',top:'0px'}} />

            </div>
            <div className={style.formContainer}
            >

                <h2 className={style.title}>
                    CodeStation 后台管理系统
                </h2>
                <Form
                    name="basic"

                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item

                        name="loginId"
                        rules={[
                            {
                                required: true,
                                message: '请输入登录账号',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="请输入账号" />
                    </Form.Item>
                    <Form.Item

                        name="loginPwd"
                        rules={[
                            {
                                required: true,
                                message: '请输入登录密码',
                            },
                        ]}
                    >
                        <Input prefix={<LockOutlined />} placeholder="请输入密码" />
                    </Form.Item>
                    <Row>
                        <Col span={14}>
                            <Form.Item

                                name="captcha"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入验证码',
                                    },
                                ]}
                            >
                                <Input prefix={<BarcodeOutlined />} placeholder="请输入验证码" />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <div onClick={handleClick} dangerouslySetInnerHTML={{ __html: captcha }} className={style.capContainer}>

                            </div>

                        </Col>
                    </Row>
                    <Form.Item
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Checkbox>7天免登录</Checkbox>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
                            登录
                        </Button>

                    </Form.Item>
                </Form>
            </div>
        </div>

    )

}